import {defineComponent, onMounted, ref} from "vue";
import {ElButton, ElCard, ElImage, ElMessage, ElPopconfirm, ElTable, ElTableColumn} from "element-plus";
import {getOnlineUser, getOnlineUserCount, offlineUser, userLineRenew} from "@/service/security/UserStatusController";

const UserStatus = defineComponent(() => {

  const onlineSum = ref<number>(0);

  const dataSource = ref<any[]>([]);

  onMounted(() => {
    initData();
  });

  const initData = async () => {
    getOnlineUserCount({
    }).then(res => {
      onlineSum.value = res.data || 0;
    })
    getOnlineUser({
    }).then(res => {
      dataSource.value = res.data || [];
    })
  }

  const kickOffTheLine = async (service: string, userId: number) => {
    const res = await offlineUser(service, userId);
    ElMessage.success("踢下他啦~");
  }

  return () => (
    <ElCard
      class="custom-card"
    >
      <div>
        当前在线用户数：{ onlineSum.value }
      </div>
      <ElTable
        border
        style={{
          marginTop: "20px",
        }}
        data={dataSource.value || []}
      >
        <ElTableColumn
          type="index"
          label="序号"
          width={80}
          align="center"
        />
        <ElTableColumn
          prop="service"
          label="所属客户端"
          align="center"
        />
        <ElTableColumn
          prop="username"
          label="用户名"
          align="center"
        />
        <ElTableColumn
          prop="headImage"
          label="头像"
          align="center"
          v-slots={{
            default: (scope) => (
              <ElImage
                src={scope.row.headImage}
                style={{
                  height: "100px",
                  width: "100px",
                }}
              />
            ),
          }}
        />
        <ElTableColumn
          prop="option"
          label="操作"
          align="center"
          width={200}
          v-slots={{
            default: (scope) => (
              <ElPopconfirm
                title="确认将他强制下线吗？"
                onConfirm={() => kickOffTheLine(scope.row.service, scope.row.id)}
                v-slots={{
                  reference: (scope) => (
                    <ElButton
                      plain
                      type="danger"
                    >
                      下线
                    </ElButton>
                  ),
                }}
              />
            ),
          }}
        />
      </ElTable>
    </ElCard>
  );

});

export default UserStatus;
